<script setup lang="ts">
import {defineProps, reactive, ref, watch} from 'vue';

const emit = defineEmits(['on-data']);
const props = defineProps({
  question: {
    type: Object,
    required: true
  }
});

const radio1 = ref('');
const radio = ref();

const get = () => {
  if (radio){
    radio1.value = "true"
  }else{
    radio1.value = "false"
  }
}
get()

const data = reactive({
  ...props.question,
  radio
});

watch(() => radio1.value, (newValue) => {
  if (radio1.value === 'true'){
    radio.value = true;
  }else if (radio1.value === 'false'){
    radio.value = false;
  }
  emit('on-data', data);
});

</script>

<template>
  <!-- 判断题组件 -->
  <div class="question-container">
    <el-row class="question-header" align="middle">
      <el-col :span="23">
        <p class="question-content">{{ question.content }}</p>
      </el-col>
      <el-col :span="1" class="score-tag-container">
        <el-tag size="large" v-if="question.score" type="success">{{ question.score }}分</el-tag>
      </el-col>
    </el-row>

    <el-radio-group v-model="radio1" class="option-group">
      <el-radio value="true" size="large" class="option-card">
        <div class="card-content">
          <span class="option-text">正确</span>
        </div>
      </el-radio>
      <el-radio value="false" size="large" class="option-card">
        <div class="card-content">
          <span class="option-text">错误</span>
        </div>
      </el-radio>
    </el-radio-group>
  </div>
  <br/>
</template>

<style scoped>
.question-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.judgment-question-container {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e7ed;
  transition: box-shadow 0.3s ease;
}

.judgment-question-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.question-header {
  margin-bottom: 20px;
}

.question-content {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  line-height: 1.6;
}

.score-tag-container {
  text-align: right;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 将单选框样式重置为卡片 */
.option-card {
  width: 100%;
  margin-right: 0;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.option-card:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* 选中状态的样式 */
.option-card.is-checked {
  background-color: #e6f4ff;
  border-color: #337ecc;
  box-shadow: 0 0 0 3px rgba(51, 126, 204, 0.1);
}

.card-content {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  //justify-content: center;
}

.option-text {
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  transition: color 0.25s ease;
}

.option-card.is-checked .option-text {
  color: #337ecc;
  font-weight: 600;
}

/* 隐藏 Element Plus 默认的 radio 图标，因为我们用整个卡片作为选择区域 */
:deep(.el-radio__input) {
  display: none;
}

:deep(.el-radio__label) {
  padding-left: 0;
  width: 100%;
}

/* 以下为原样式中用于覆盖默认单选框的代码，现已不需要，但保留以供参考 */
/*
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #409eff;
  font-weight: 600;
}
*/

/* 校验结果样式 (原样式中已存在，但未在模板中使用，保留) */
.validation-result {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.validation-result.is-correct {
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}

.validation-result.is-incorrect {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
</style>